<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">
        <!-- 事件绑定的基本格式 -->
        <!-- 无参 -->
        <input type="button" value="测试01" v-on:click="fn01" >
        <!-- 有参 -->
        <input type="button" value="测试02" v-on:click="fn02('haha')" >

        <!-- 事件对象的获取 -->
        <!-- 无参 -->
        <!-- <input type="button" value="测试03" v-on:click="fn03" > -->
        <input type="button" value="测试03" v-on:click="fn03($event)" >
        <!-- 有参 -->
        <input type="button" value="测试04" v-on:click="fn04($event,'heihei')" >

        <!-- 事件处理函数里的this -->
        <input type="button" value="测试05" v-on:click="fn05" >

    </div>
</body>
</html>
<script src="./js/vue.js"></script>

<script>

    let vm = new Vue({
        el:"#app",
        data:{
           msg:"hi",
           str:"hello"
        },
        methods:{
            fn01(){
                console.log("hehe");
            },
            fn02(str){
                console.log("str",str);
            },
            fn03(e){
                console.log("e",e);
            },
            fn04(e,str){
                console.log("e",e);
                console.log("str",str);
            },
            fn05:function(){
                // this是vue对象本身。
                console.log("this",this);
            }
        }     
    });




</script>